<template>
	<!-- <view>
		发现页
	</view> -->
	<view class="box">
		<view class="head">
			<view class="head-c">
				<view @click="ArticleLists(item.index)" :class="{active:item.index==replace}" v-for="item in list" :key="item.index">{{item.name}}</view>
				<!-- <view>品牌列表</view> -->
			</view>
		</view>
	 	<view class="content" v-if="contentList">
			<view class="Article" v-for="item in Article" :key="item.id">
				<view  @click="goarticle(item.id)" class="Article-t">
					<image :src="item.coverImg"></image>
					<view class="title">
						<view class="title-t">{{item.title}}</view>
						<view class="title-v">{{item.author}}</view>
					</view>
				</view>
				<view class="Article-c">
					<view class="num">
						<image src="../../static/icons/view.png" mode=""></image>
						<view>{{item.viewCount}}</view>
					</view>
					<view class="int" @tap="savefind(item.id)">
						<image v-if="!Article.isfind" src="../../static/icons/collect1.png"></image>
						<image v-else src="../../static/icons/collect1-active.png" ></image>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<view class="Brand" v-for="item in AllCategory" :key="item.id">
				<image :src="item.bigPic"></image>
				<view class="Brand-c">
					<view class="cname">{{item.name}}</view>
					<view class="int">{{item.brandStory}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {findBrandsByPage,findArticleByPage,productArticle} from "../../api/find/index.js"
	export default {
		data() {
			return {
				//品牌列表
				AllCategory:[],
				//精选文章
				Article:[],
				//替换 默认0
				replace:0,
				//是否切换文章和列表
				contentList:true,
				//收藏
				collect:false,
				list:[
					{
						name:"精选文章",
						index:0
					},
					{
						name:"品牌列表",
						index:1
					}
				]
			};
		},
		methods:{
			//点击转换
			ArticleLists(id){
				this.replace=id;
				this.contentList=!this.contentList;
			},
			//点击跳转文章详情
			goarticle(id){
				console.log(id)
				uni.navigateTo({
					url:`./article/article?id=${id}`,
				})
				
			},
			//点击收藏文章
			savefind(id){
				// var ArticleList=uni.getStorageSync("ArticleList");
				// if(ArticleList.length>0){
				// 	var item=ArticleList.find(ele=>ele.id==this.Article.id);
				// 	var index=ArticleList.findIndex(ele=>ele.id==this.Article.id);
				// 	if(item){
				// 		ArticleList.splice(index,1);
				// 		uni.setStorageSync("ArticleList",ArticleList);
				// 		this.Article.isfind=false;
				// 	}else{
				// 		ArticleList.push(this.Article);
				// 		uni.setStorageSync("ArticleList",ArticleList);
				// 		this.Article.isfind=true;
				// 	}
				// }else{
				// 	var arr=[];
				// 	arr.push(this.Article);
				// 	uni.setStorageSync("ArticleList",arr);
				// 	this.Article.isfind=true;
				// }
			},
			
		},
		onLoad(){
			findBrandsByPage(1,6).then(res=>{
				// console.log(res)
				this.AllCategory=res.data.rows
			})
			//精选文章
			findArticleByPage(1,5).then(res=>{
				console.log(res)
				// var ArticleList = uni.getStorageSync("ArticleList");
				// var item = ArticleList.find(ele=>ele.id==res.data.rows.id);
				// if(item){
				// 	res.data.rows.isfind=true;
				// }else{
				// 	res.data.rows.isfind=false;
				// };
				this.Article=res.data.rows;
			})
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	background-color:#F1ECE7 ;
	.head{
		width: 100%;
		height: 44px;
		background-color:#354E44 ;
		
		// justify-content: space-between;
		
		.head-c{
			display: flex;
			justify-content: center;
			view{
				color: #fff;
				height: 100%;
				margin-right:10px;
				line-height: 41px;
				
			}
			.active{
				border-bottom: 1px solid #fff;
				
			}
		}
		
	}
	.content{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.Article{
			width: 90%;
			height: 241px;
			margin:15px auto;
			background-color: #fff;
			border-radius: 5px;
			overflow: hidden;
			.Article-t{
				position: relative;
				width: 100%;
				height: 191px;
				image{
					width: 100%;
					height: 100%;
				}
				.title{
					position: absolute;
					left: 10px;
					top: 122px;
					color: #fff;
					.title-t{
						font-size: 24px;
						// font-weight: bold;
					}
					.title-v{
						margin-top:5px;
						font-size: 16px;
					}
				}
			}
			.Article-c{
				padding:10px 30px;
				height: 30px;
				// height: 100%;
				display: flex;
				justify-content: space-between;
				.num{
					width: 20%;
					height: 100%;
					line-height: 30px;
					display: flex;
					justify-content: space-between;
					image{
						width:50%;
						height: 100%;
					}
					view{
						width: 40%;
					}
					
				}
				.int{
					width: 10%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.Brand{
			width: 90%;
			height: 310px;
			margin:15px auto;
			background-color: #fff;
			image{
				width: 100%;
				height:240px;
			}
			.Brand-c{
				padding: 15px;
				.cname{
					font-size: 16px;
					font-weight: bold;
				}
				.int{
					font-size: 11px;
					color: #b1b1b1;
					margin-top: 5px;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
